<div class="container filter">
  <form nz-form [formGroup]="searchForm" (ngSubmit)="onSubmit()">
    <div>
      <i nz-icon nzType="search" nzTheme="outline" class="card-title"></i>
      <span class="card-title">筛选搜索</span>
      <button type="submit" nz-button nzType="primary" style="float: right;"> 查询结果 </button>
    </div>
    <div nz-row nzGutter=24 style="margin-top: 16px;">
      <div nz-col nzSpan=5 nzOffset=1>
        <nz-form-item>
          <nz-form-label nzFor="keyword">
            输入搜索
          </nz-form-label>
          <nz-form-control>
            <input nz-input formControlName="keyword" placeholder="品牌名称/关键字">
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
</div>

<div class="container operate">
  <i nz-icon nzType="profile" nzTheme="outline" class="card-title"></i>
  <span class="card-title">数据列表</span>
  <button nz-button style="float: right;" nzSize="small" (click)="handleAdd()"> 添加 </button>
</div>

<div class="table-container">
  <nz-table #brandTable nzSize="small" [nzData]="brandList" [nzFrontPagination]="false" [nzShowPagination]="false"
    nzBordered [nzLoading]="tableLoading">
    <thead>
      <tr>
        <th nzAlign="center" [(nzChecked)]="tableCheck.thChecked" [nzIndeterminate]="tableCheck.thIndeterminate"
          (nzCheckedChange)="tableCheck.onAllChecked($event)"></th>
        <th nzAlign="center" nzWidth="6%">编号</th>
        <th nzAlign="center">品牌名称</th>
        <th nzAlign="center" nzWidth="6%">品牌首字母</th>
        <th nzAlign="center" nzWidth="6%">排序</th>
        <th nzAlign="center" nzWidth="6%">品牌制造商</th>
        <th nzAlign="center" nzWidth="6%">是否显示</th>
        <th nzAlign="center" nzWidth="12%">相关</th>
        <th nzAlign="center" nzWidth="12%">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of brandTable.data">
        <td nzAlign="center" [nzChecked]="tableCheck.setOfCheckedId.has(data.id)"
          (nzCheckedChange)=" tableCheck.oneItemChecked(data.id, $event)"> </td>
        <td nzAlign="center">{{data.id}}</td>
        <td nzAlign="center">{{data.name}}</td>
        <td nzAlign="center">{{data.firstLetter}}</td>
        <td nzAlign="center">{{data.sort}}</td>
        <td nzAlign="center">
          <nz-switch [(ngModel)]="data.factoryStatus" [nzControl]="true" (click)="handleFactoryStatusClick(data.id)" [nzLoading]="factoryStatusLoadingStatus.get(data.id)">
          </nz-switch>
        </td>
        <td nzAlign="center">
          <nz-switch [(ngModel)]="data.showStatus" [nzControl]="true" (click)="handleShowStatusClick(data.id)" [nzLoading]="showStatusLoadingStatus.get(data.id)">
          </nz-switch>
        </td>
        <td nzAlign="center">
          <span>商品：</span>
          <a nz-botton nzType="link">{{data.productCount}}</a>&nbsp;&nbsp;
          <span>评价：</span>
          <a nz-botton nzType="link">{{data.productCommentCount}}</a>
        </td>
        <td nzAlign="center">
          <button nz-button nzSize="small" class="operateButton" (click)="handleUpdate(data.id)">编辑</button>
          <button nz-button nzSize="small" nzDanger nzType="primary" class="operateButton"
            (click)="handleDelete(data.id)">删除</button>
        </td>
      </tr>
    </tbody>
  </nz-table>
</div>

<div class="batch-operate-container">
  <nz-select [(ngModel)]="batchOperate" nzAllowClear nzPlaceHolder="批量操作" style="width: 215px;">
    <nz-option *ngFor="let operate of operateOptions" [nzValue]="operate.value" [nzLabel]="operate.label"></nz-option>
  </nz-select>
  <button nz-button nzType="primary" style="margin-left: 10px;" (click)="handleBatchOpterate()">确定</button>
</div>

<div class="pagination-container">
  <nz-pagination [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" [nzTotal]="total"
    [nzPageSizeOptions]="[10, 15,20]" nzShowQuickJumper nzShowSizeChanger [nzShowTotal]="totalTemplate"
    (nzPageIndexChange)="handlePageIndexChange()" (nzPageSizeChange)="handlePageSizeChange()">
  </nz-pagination>
  <ng-template #totalTemplate let-total>共{{total}}条</ng-template>
</div>
